<template>
  <BoTable
    :columns="columns"
    :request="list"
    ref="tableRef"
    height="auto"
    :row-selection="rowSelection"
    row-key="id"
  >
    <template #toolbars>
      <Space :size="8">
        <Button type="primary" @click="onAdd"> 新增 </Button>
        <Button @click="onDelete(null)" :disabled="!selectKeys.length">
          删除
        </Button>
      </Space>
    </template>
  </BoTable>
  <FormModal :columns="item" :model="model"> </FormModal>
  <SseModal />
</template>

<script setup lang="tsx">
import { computed, ref } from 'vue';
import { useFormModal } from '@boeyo/hooks';
import {
  BoFormProps,
  BoTable,
  BoTableProps,
  ConfigProvideProps,
  ConfigProvider,
} from '@boeyo/ui';
import { Button, Modal, Space, Switch, message } from 'ant-design-vue';
import { pick } from 'lodash-es';
import { useSseModal } from '@/hooks/useSseModal';
import { add, jopensDelete, jopensDetail, jopensInfoUpdate, list } from './api';

const selectKeys = ref<number[]>([]);
const rowSelection = computed<BoTableProps['rowSelection']>(() => {
  return {
    onChange(values) {
      selectKeys.value = values as number[];
    },
  };
});
const tableRef = ref();
const columns = computed<BoTableProps['columns']>(() => [
  {
    title: '服务器名称',
    dataIndex: 'name',
  },
  {
    title: '服务器IP',
    dataIndex: 'ip',
  },
  {
    title: '端口',
    dataIndex: 'port',
    hideInSearch: true,
  },
  {
    title: '用户名',
    dataIndex: 'username',
    hideInSearch: true,
  },
  {
    title: '密码',
    dataIndex: 'password',
    hideInSearch: true,
  },
  {
    title: '是否启用',
    dataIndex: 'status',
    hideInSearch: true,
    customRender: ({ text, record }) => {
      return (
        <Switch
          checkedValue={'1'}
          unCheckedValue={'0'}
          v-model:checked={text}
          onChange={(e) => onChange(e, record)}
        ></Switch>
      );
    },
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    hideInSearch: true,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
    actions: [
      {
        text: '查看',
        onClick(record) {
          onView(record);
        },
      },
      {
        text: '删除',
        onClick(record) {
          onDelete(record);
        },
      },
    ],
  },
]);

const { SseModal, open: openSseModal } = useSseModal();

const { FormModal, open } = useFormModal({
  size: 'small',
  column: 1,
});

const onView = async (record) => {
  const result: any = await jopensDetail(record.id);
  model.value = result.data;
  open({
    title: (modalType) => (modalType === 'edit' ? '编辑' : '详情'),
    modalType: 'info',
    showMessage: false,
    request: async (params: any) => {
      openSseModal({
        title: '',
        url: '/api/jopensInfo/update',
        data: params,
        method: 'PUT',
        onClose() {
          tableRef.value.refresh();
        },
      });
    },
    defaultValue: result.data,
  });
};

const model: any = ref({});
const onAdd = () => {
  model.value = {
    regex: '^.*/.*',
  };
  open({
    title: '新增',
    showMessage: false,
    request: async (params: any) => {
      openSseModal({
        title: '',
        url: '/api/jopensInfo/add',
        data: params,
        method: 'POST',
        onClose() {
          tableRef.value.refresh();
        },
      });
    },
    defaultValue: model.value,
  });
};
const item = computed<BoFormProps['columns']>(() => [
  {
    title: '服务器名称',
    dataIndex: 'name',
    valueType: 'input',
    formItemProps: {
      rules: [
        {
          required: true,
          message: `请输入服务器名称`,
          trigger: 'blur',
        },
      ],
    },
    fieldProps: {
      placeholder: `请输入服务器名称`,
    },
  },
  {
    title: 'IP',
    dataIndex: 'ip',
    valueType: 'input',
    formItemProps: {
      rules: [
        {
          required: true,
          message: `请输入IP`,
          trigger: 'blur',
        },
      ],
    },
    fieldProps: {
      placeholder: `请输入IP`,
    },
  },
  {
    title: '端口',
    dataIndex: 'port',
    valueType: 'input',
    formItemProps: {
      rules: [
        {
          required: true,
          message: `请输入端口`,
          trigger: 'blur',
        },
      ],
    },
    fieldProps: {
      placeholder: `请输入端口`,
    },
  },
  {
    title: '正则表达式',
    dataIndex: 'regex',
    valueType: 'input',
    formItemProps: {
      rules: [
        {
          required: true,
          message: `请输入正则表达式`,
          trigger: 'blur',
        },
      ],
    },
    fieldProps: {
      placeholder: `请输入正则表达式`,
    },
  },
  {
    title: '账号',
    dataIndex: 'username',
    valueType: 'input',
    formItemProps: {
      rules: [
        {
          required: true,
          message: `请输入账号`,
          trigger: 'blur',
        },
      ],
    },
    fieldProps: {
      placeholder: `请输入账号`,
      autocomplete: 'off',
    },
  },
  {
    title: '密码',
    dataIndex: 'password',
    valueType: 'input',
    formItemProps: {
      rules: [
        {
          required: true,
          message: '请输入密码',
          trigger: 'blur',
        },
      ],
    },
    fieldProps: {
      placeholder: '请输入密码',
      type: 'password',
      autocomplete: 'off',
    },
  },
]);

const onDelete = (record: any) => {
  const ids = record ? record.id : selectKeys.value.join(',');
  Modal.confirm({
    title: '删除',
    content: '确定删除当前项吗？',
    okText: '确定',
    cancelText: '取消',
    onOk: async () => {
      // await jopensDelete(ids);
      openSseModal({
        title: '',
        url: `/api/jopensInfo/delete/${ids}`,
        // data: params,
        method: 'DELETE',
        onClose() {
          tableRef.value.refresh();
        },
      });
      // tableRef.value.refresh();
    },
  });
};

const onChange = (status, record) => {
  const text = record.status == '0' ? '是否启用？' : '是否停用？';
  Modal.confirm({
    title: '系统提示',
    content: text,
    okText: '确定',
    cancelText: '取消',
    onOk: async () => {
      try {
        openSseModal({
          title: '',
          url: '/api/jopensInfo/update',
          data: { status: record.status == '1' ? '0' : '1', id: record.id },
          method: 'PUT',
          onClose() {
            tableRef.value.refresh();
          },
        });
      } catch (error) {}
    },
  });
};
</script>

<style lang="scss" scoped>
.custom_title {
  padding-left: 10px;
  position: relative;
  &::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    content: '';
    width: 3px;
    height: 10px;
    background-color: #40deff;
  }
}
</style>
<route lang="json">
{
  "name": "jopens管理",
  "meta": { "title": "jopens管理" }
}
</route>
